<template>
    <div class="control-setting-container_group-item">
        <el-collapse class="group-item">
            <el-collapse-item :title="itemList.name">
<!--                <template v-for="(item, index) in itemList">-->
                    <item-setting :itemData="itemList" :typeList="typeList"></item-setting>
<!--                </template>-->
            </el-collapse-item>
        </el-collapse>
        <i class="el-icon-delete item-icon" @click="delItem"></i>
    </div>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Vue } from "vue-property-decorator";
import ItemSetting from "../item-setting/index.vue";

@Component({
    components: {
        ItemSetting
    }
})
export default class GroupItem extends Vue {
    @PropSync("ChildControlItemList", { type: Object, default: {} }) readonly itemList!: object;
    @Prop({ default: () => { return {}; } }) private typeList!: any;

    title = ""

    created() {
        console.log(this.itemList, "itemList");
    }

    delItem() {
        console.log("删除子表");
    }
}
</script>

<style lang="scss" scoped>
.control-setting-container_group-item {
    @include flexLayout(flex,normal,normal);
    .group-item {
        width: calc(100% - 35px);
    }
    .item-icon {
        margin-top: 14px;
        cursor: pointer;
    }
}
</style>
